<template>
 <el-form class="upload" label-position="top">
  <h6>{{ $t('user.setting.form1') }}</h6>

  <el-form-item :label="$t('user.setting.label1')" prop="idNumber">
   <el-input v-model="authForm.idNumber" :placeholder="$t('common.error.t14')"></el-input>
  </el-form-item>

  <div class="box">
   <el-form-item :label="$t('user.setting.img1')" prop="img1">
    <el-upload
     v-loading="card_loading"
     class="avatar-uploader"
     :headers="{'acce-token': $store.getters.getToken}"
     :action="apiHost"
     accept=".jpg, .png, .jpeg"
     :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload"
     :show-file-list="false">
     <img v-if="authForm.image1" :src="authForm.image1" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
   </el-form-item>

   <el-form-item :label="$t('user.setting.img2')" prop="img2">
    <el-upload
     v-loading="picture"
     class="avatar-uploader"
     :on-success="handleAvatarSuccess2"
     :before-upload="beforeAvatarUpload2"
     :headers="{'acce-token': $store.getters.getToken}"
     :action="apiHost"
     accept=".jpg, .png, .jpeg"
     :show-file-list="false">
     <img v-if="authForm.image2" :src="authForm.image2" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
   </el-form-item>
  </div>

  <el-button type="primary" @click.native="submit">{{ $t('user.setting.button1') }}</el-button>
 </el-form>
</template>

<script>
export default {
 name: "RealName",
 data() {
  return {
   authForm: {
    idNumber: '',
    image1: '',
    image2: ''
   },
   apiHost: '',

   card_loading: false,
   picture: ''
  }
 },
 created() {
  this.apiHost = this.$address.upload
 },
 methods: {
  // 上传图片
  handleAvatarSuccess(res, file) {
   this.card_loading = false
   if (res.code === 1) {
    this.authForm.image1 = res.data
   } else {
    this.$message.error(res.msg);
   }
  },
  // 上传图片前
  beforeAvatarUpload(file) {
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
   const isLt2M = file.size / 1024 / 1024 < 2;

   if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 格式、 PNG 格式、 JPEG格式!');
   }
   if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
   }
   if (isJPG && isLt2M) {
    this.card_loading = true
   }
   return isJPG && isLt2M;
  },

  // 上传图片
  handleAvatarSuccess2(res, file) {
   this.picture = false
   if (res.code === 1) {
    this.authForm.image2 = res.data
   } else {
    this.$message.error(res.msg);
   }
  },
  // 上传图片前
  beforeAvatarUpload2(file) {
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
   const isLt2M = file.size / 1024 / 1024 < 2;

   if (!isJPG) {
    this.$message.error(this.$t('user.setting.imageType'));
   }
   if (!isLt2M) {
    this.$message.error(this.$t('user.setting.imageSize'));
   }
   if (isJPG && isLt2M) {
    this.picture = true
   }
   return isJPG && isLt2M;
  },

  // 提交认证
  submit () {
   if (this.authForm.idNumber === '') {
    this.$message.error(this.$t('common.error.t14'))
   } else {
    if (this.authForm.image1 === '') {
     this.$message.error(this.$t('user.setting.img1'))
    } else {
     if (this.authForm.image2 === '') {
      this.$message.error(this.$t('user.setting.img2'))
     } else {
      const formData = new FormData()
      for (let i in this.authForm) {
       formData.append(i, this.authForm[i])
      }
      this.$post(this.$address.kyc, formData).then(res => {
       if (res.code === 1) {
        this.$message.success('提交成功')
        for (let i in this.authForm) {
         this.authForm[i] = ''
        }
       }
      })
     }
    }
   }
  }
 }
}
</script>

<style scoped lang="scss">
.upload {
 margin-top: 50px;
 border: 1px solid rgba(0,0,0,0.1);
 padding: 20px;
 border-radius: 4px;
 margin-bottom: 40px;
 width: 60%;
 display: flex;
 flex-direction: column;

 > h6 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #002445;
 }

 .el-form-item {
  /deep/ .el-form-item__label {
   color: #002445;
   padding-bottom: 15px;
   line-height: 23px;
  }

  &:nth-of-type(1) {
   margin-bottom: 0;
   /deep/ .el-input__inner {
    color: #000;
    background-color: #f5faff;
    font-weight: bold;

    &::-moz-placeholder {
     color: #002445;
    }
   }
  }
 }

 .box {
  display: flex;
  margin-bottom: 10px;
  margin-top: 40px;

  .el-form-item {
   flex: 1 1 auto;
   width: 1%;
   &:nth-of-type(1) {
    margin-right: 10px;
   }

   /deep/ .el-form-item__label {
    font-size: 16px;
    color: #000;
   }

   /deep/ .el-form-item__content {
    display: flex;

    .avatar-uploader {
     margin-right: auto;
     margin-bottom: auto;
     width: 180px;
     height: 180px;
     .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
       border-color: #409EFF;
      }
     }
    }
    .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 178px;
     height: 178px;
     line-height: 178px;
     text-align: center;
    }
    .avatar {
     width: 178px;
     height: 178px;
     display: block;
    }
   }
  }
 }

 .el-button {
  background-color: #396fb5;
  border: 1px solid #396fb5;
  color: #fff;
  margin-left: auto;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;

  &:hover {
   background-color: #ffffff;
   border: 1px solid #000;
   transition: .3s;
   color: #000;
  }

  /deep/ span {

  }
 }
}
</style>
